import React, { useEffect, useState } from 'react'
import { apis } from '@/api'
import { LocalStorageKey } from '@/api/browser'
import { useRouter } from '@/routes'
import { useUserStore } from '@/store'

type Props = {
  children: React.ReactNode
}

/**
 * 鉴权拦截器
 */
const AuthInterceptor = ({ children }: Props) => {
  const router = useRouter()
  const { token, setToken } = useUserStore()
  const [isInitialized, setIsInitialized] = useState(false)

  // 一种简单的解决使用Cookie-Session登录时，前端判定是否登录的方法
  // 登录时会向本地存储记入已登录状态
  // 在刷新时，通过从本地存储同步该状态，以达到还原登录状态的问题
  useEffect(() => {
    console.log('鉴权初始化, 从本地存储同步登录状态...')
    if (apis.localStorageApi.getItem(LocalStorageKey.LOGIN)) {
      setToken(new Date().toTimeString())
      console.log('同步登录状态成功')
    }
    setIsInitialized(true)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // 进行鉴权，通过存储中的token值来判定是否登录
  // 若未登录，跳转到登录页；以达到拦截未登录的目的
  // Token若过期，后端返回401时，在API层会进行处理
  useEffect(() => {
    // 只有初始化完成后才执行鉴权逻辑
    if (!isInitialized) return

    console.log(`进行鉴权, token: ${token}, path: ${router.pathname}`)
    if (!token) {
      router.toLoginPage()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.pathname, token, isInitialized])

  return children
}

export default AuthInterceptor
